<!-- 账户明细 -->
<template>
  <div class="account-detail pd-12">
    <el-card>
      <div class="top-sum-detail">
        <p>收入支出明细列表</p>
        <p>钱包总金额：{{userinfo.user.amount}}元</p>
      </div>
      <el-form class="query-form" inline label-width="75px">
        <div class="form-top">
          <div>
              <el-button class="formtop-btn" v-for="(item, index) in typebtnlist" :key="index" :type="item.type" @click="activevtn(item.value)" >{{ item.label }}</el-button>
          </div>
          <div>
            <el-form-item label="时间:">
              <el-date-picker v-model="times" type="daterange" range-separator="~" start-placeholder="开始时间"
                end-placeholder="结束时间" value-format="YYYY-MM-DD" @change="changeTime" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="pd-12" @click="getListData" >搜索</el-button>
            </el-form-item>
          </div>
        </div>

      </el-form>
    </el-card>

    <el-table class="mgt-20" :data="tableList" row-key="id" border @selection-change="onSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="时间" prop="created_at" />
      <el-table-column label="收入/支出"  >
        <template #default="{ row }">
            <span type="primary" v-if="row.fee_type === 1">收入</span>
            <span type="primary" v-if="row.fee_type === 2">支出</span>
          </template>
      </el-table-column>
      <el-table-column label="渠道" prop="feeTypeText" />
      <el-table-column label="金额" prop="fee" />
      <el-table-column label="平台服务费" prop="service_fee" />
      <!-- <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">查看详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination v-model:current-page="query.page" v-model:page-size="query.limit" :total="total"
      @current-change="getListData" />
  </div>
</template>

<script>
import { reactive, toRefs, toRaw, onMounted } from 'vue'
import { bill } from '@/api/account.js'
import useUserStore from '../../../store/modules/user'

export default {
  setup () {
    const userStore = useUserStore()
    const state = reactive({
      query: {
        page: 1,
        limit: 10
      },
      total: 0, // 总条数
      tableList: [],
      selection: [], // 选择的数据
      times: '', // 时间
      typebtnlist: [
        { label: '全部', value: 0, type: 'primary' },
        { label: '收入', value: 1, type: 'info' },
        { label: '支出', value: 2, type: 'info' }
      ], // 顶部按钮
      activetypebtn: 0, // 选中的按钮
      userinfo: userStore.info
    })
    const activevtn = (evn) => {
      console.log(evn)
      const index = state.typebtnlist.findIndex(el => el.value === evn)
      console.log(index)
      state.activetypebtn = evn
      state.typebtnlist.forEach(item => {
        item.type = 'info'
      })
      state.typebtnlist[index].type = 'primary'
      getListData()
    }
    const handleEdit = (data) => {
      console.log(data)
    }
    onMounted(() => {
      getListData()
      console.log(state.userinfo)
    })
    // 获取列表数据
    const getListData = async () => {
      try {
        const params = toRaw(state.query)
        params.fee_type = state.activetypebtn
        const res = await bill(params)
        console.log(res)
        state.tableList = res.data
        state.total = res.total
      } catch (e) {
        console.log(e)
      }
    }
    // 列表多选回调
    const onSelectionChange = (selection) => {
      state.selection = selection
      console.log(state.selection.length)
    }
    // 时间
    const changeTime = () => {
      console.log(state.times)
      if (state.times) {
        state.query.start_time = state.times[0]
        state.query.end_time = state.times[1]
      } else {
        state.query.start_time = ''
        state.query.end_time = ''
      }
    }

    return {
      ...toRefs(state),
      handleEdit,
      getListData,
      onSelectionChange,
      changeTime,
      activevtn
    }
  }
}
</script>

<style lang="scss" scoped>
.account-detail {
  .top-sum-detail {
      font-size: 14px;
      // color: #676a6c;
    }
  .query-form {
    .form-top {
      display: flex;
      justify-content: space-between;
    }
    :deep(.el-form-item) {
      margin-right: 15px !important;
    }

    :deep(.el-input__inner) {
      width: 150px;
      height: 25px;
    }

    // 时间
    :deep(.el-date-editor--daterange) {
      height: 26px;
    }
  }
}
</style>
